<template>
	<view v-if="info" class="center">
		<view class="top_bg">
			<view class="title" :style="'padding-top:'+(barHeight+10)+'px'">
				<image style="z-index: 999;" class="back" @click="back" src="@/static/discover/vback.png" mode=""></image>
				<text >动态中心</text>
			</view>
			<image src="@/static/discover/bg.png" mode=""></image>
		</view>
		<view class="content">
			<view class="avatar" @click="tofabu">
				<image :src="$oss(info.user.work_image)" mode=""></image>
				<view class="guanzhu" v-if="info.collectStatus == 1" @tap.stop="collect(info,0)">
					取消关注
				</view>
				<view class="guanzhu" v-else @tap.stop="collect(info,1)">
					+ 关注
				</view>
				<h4>{{info.name}}</h4>
			</view>
			<view class="introduct" v-if="info.intro">
				{{info.intro}}
			</view>
			<!-- <view class="middle">
				<view class="middle_item">
					<strong>893</strong>
					<text>粉丝</text>
				</view>
				<image src="../../static/fenge.png" mode=""></image>
				<view class="middle_item">
					<strong>893</strong>
					<text>粉丝</text>
				</view>
			</view> -->
			<view class="line" style="margin: 50rpx auto;"></view>
			
		</view>
		<scroll-view scroll-y="true" class="main"  @scrolltolower="lower">
			<view class="dailylife" v-for="(item,index) in list"  @click="detail(item)">
				<view class="dailylife_left">
					<view class="point"></view>
					<view class="dailylife_left_line"></view>
				</view>
				<view class="dailylife_right">
					<strong style="font-size: 56rpx;">{{item.createtime | date('mm.dd')}}</strong>
					<p>{{item.content}}</p>
					<u-album v-if="item.type == 1" :urls="[$oss(item.coverimage)]" :previewFullImage="false" ></u-album>
					<u-album v-else :urls="$oss(item.images)" :previewFullImage="false"></u-album>
					<view class="bottom_left">
						<view class="bottom_left_item">
							<image v-if="item.likeStatus==1"  src="@/static/discover/good.png" mode=""></image>
							<image v-else  src="@/static/discover/nogood.png" mode=""></image>
							<text>{{item.likes}}</text>
						</view>
						<view class="bottom_left_item">
							<image src="@/static/discover/comments.png" mode=""></image>
							<text>{{item.comments}}</text>
						</view>
					</view>
					<view class="line" style="margin: 50rpx auto; width: 85vw;"></view>
				</view>
			</view>
			<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
					</u-empty>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:1,
				id: '',
				list: [],
				finish: false,
				page: 1,
				user_id: '',
				lng: uni.getStorageSync('lng'),
				lat: uni.getStorageSync('lat'),
				info: '',
				barHeight: ''
			};
		},
		onLoad(option){
			this.barHeight = uni.getSystemInfoSync().statusBarHeight;
			this.id = option.id
			this.user_id = option.user_id
			this.getlist()
			this.getInfo()
			uni.$on('likes',()=>{
				this.reload()
			})
		},
		methods:{
			collect(data, index) {
				
				this.$api.post('/collect', {
					service_id: data.user_id,
					status: index
				}).then(res => {
					if (res.code == 1) {
						if (index == 0) {
							uni.$u.toast('取消关注')
							data.collectStatus = 0
							data.collectNum--
						} else {
							uni.$u.toast('关注成功')
							data.collectStatus = 1
							data.collectNum++
						}
			
					
					}
				}).catch((res) => {
			
				})
			},
			play(){
				
			},
			detail(item){
				if(item.type == 1){
					this.$goTo('/pages/discover/video?id='+item.id)
				} else {
					this.$goTo('/pages/discover/detail?id='+item.id)
				}
			},
			getInfo(){
				this.$api.post('/skillinfo', {
					page: 1,
					id: this.id,
					lng: this.lng,
					lat: this.lat
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
				
					}
				}).catch((res) => {
				
				})
			},
			
			reload() {
				this.page = 1;
				this.finish = false
				this.list = []
				this.getlist()
			},
			lower() {
				this.page++
				this.getlist()
			},
			getlist() {
				if (this.finish) {
					return
				}
				this.$api.post('/servicelist', {
					page: this.page,
					id: this.user_id
				}).then(res => {
					if (res.code == 1) {
						let arr = res.data.map(value => {
							if(value.type === '0'){
								value.images = value.images.split(',')
							}
							return value
						})
						this.list = this.list.concat(res.data)
			
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
			
				})
			},
			back(){
				uni.navigateBack({delta:1})
			},
			tofabu(){
				uni.navigateTo({
					url:'/pages/fabulist/fabulist'
				})
			}
		}
	}
</script>

<style lang="scss">
	.center{
		height: calc(100vh - var(--window-bottom));
		display: flex;
		flex-direction: column;
		.main{
			flex: 1;
			overflow: hidden;
			background: #fff;
		}
	}
.top_bg{
	background-color: #00CE9B;
	width: 100vw;
	height: 354rpx;
	>image{
		width: 100vw;
		height: 354rpx;
	}
	.title{
		display: flex;
		align-items: center;
		padding: 100rpx 30rpx;
		width: 55%;
		justify-content: space-between;
		position: absolute;
		color: #fff;
		.back{
			width: 64rpx;
			height: 64rpx;
		}
	}
}
.content{
	margin-top: -30rpx;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0 ;
	width: 100vw;
	.avatar{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		image{
			margin-top: -100rpx;
			width: 160rpx;
			height: 160rpx;
			border: 5rpx solid #fff;
			border-radius: 50%;
			// z-index: 999;
		}
		.guanzhu{
			font-size: 24rpx;
			z-index: 99;
			margin-top: -40rpx;
			width: 118rpx;
			height: 49rpx;
			background: #00CE9B;
			border-radius: 48rpx;
			text-align: center;
			line-height: 49rpx;
			color: #fff;
			margin-bottom: 40rpx;
		}
	}
	.introduct{
		margin: 50rpx auto;
		width: 90vw;
		height: 88rpx;
		background: #F6F7FB;
		border-radius: 20rpx;
		color: #1C274C;
		line-height: 88rpx;
		font-size: 26rpx;
		text-align: center;
	}
	.middle{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		image{
			width: 2rpx;
			height: 21rpx;
		}
		.middle_item{
			display: flex;
			align-items: center;
			flex-direction: column;
			text{
				font-size: 24rpx;
				color: #666666;
				margin-top: 20rpx;
			}
		}
	}
	
}
.dailylife{
		padding: 0 30rpx;
		display: flex;
		.dailylife_left{
			display: flex;
			align-items: center;
			flex-direction: column;
			.point{
				width: 14rpx;
				height: 14rpx;
				background: #00CE9B;
				border: 4rpx solid #00CE9B;
				border-radius: 50%;
			}
			.dailylife_left_line{
				// width: 1rpx;
				height: 100%;
				border: 1rpx solid #D9D9D9;
			}
		}
		.dailylife_right{
			margin-left: 40rpx;
			p{
				font-size: 28rpx;
				margin: 50rpx 0;
			}
			image{
				width: 336rpx;
				height: 337rpx;
			}
			.bottom_left{
				margin: 30rpx 0;
				width: 236rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.bottom_left_item{
					display: flex;
					image{
						width: 37rpx;
						height: 39rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

</style>
